<template>
	<header class="top-header">
		<h1>设备管理系统</h1>
		<el-dropdown @command="onCommand">
			<div class="menu-link">
				{{name}}
				<i class="el-icon-arrow-down"></i>
			</div>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="password">修改密码</el-dropdown-item>
				<el-dropdown-item command="logout">退出登录</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		<el-dialog
			:close-on-click-modal='false'
			:close-on-press-escape="false"
			:visible.sync="show"
			append-to-body
			@close="show=false"
			title="修改密码"
			width="500px"
			>
			<div class="dialog-content">
				<el-input type="password" placeholder="旧密码" v-model="fromData.oldPw"></el-input>
				<el-input type="password" placeholder="新密码" v-model="fromData.newPw1"></el-input>
				<el-input type="password" placeholder="重复新密码" v-model="fromData.newPw2"></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="show = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>
	</header>
</template>

<script>
export default {
	props:{
		name:{
			type: String,
			default: ''
		}
	},
	data(){
		return {
			show: false,
			fromData:{
				oldPw: '',
				newPw1: '',
				newPw2: ''
			}
		}
	},
	methods:{
		onCommand(e){
			this[e]();
		},
		logout(){
			this.axios.post('/logout').then(() => {
				this.$router.push('/login')
			})
		},
		password(){
			this.show = true
		},
		submit(){
			const {oldPw,newPw1,newPw2} = this.fromData;
			if(!oldPw){
				return this.$message.error('请填写旧密码')
			}
			if(!newPw1) {
				return this.$message.error('请输入新密码')
			}
			if(newPw1 != newPw2) {
				return this.$message.error('两次输入密码不一致')
			}
			this.axios.post('/password-reset',{
				oldPw,
				newPw:newPw1
			}).then(data => {
				if(!data.code){
					this.$message.success('密码修改成功')
					this.show = false
				}
			})
		}
	}
}
</script>

<style lang="sass" scoped>
header
	padding: 0 20px
	display: flex
	justify-content: space-between
	align-items: center
	color: #fff
	h1
		font-size: 18px
		padding-left: 25px
		background: url(~@/assets/img/logo.png) no-repeat center left
		background-size: 18px
	.menu-link
		color: #fff
.dialog-content
	.el-input
		margin-bottom: 15px
</style>
